<template>
  <BaseCard title="布控任务">
    <div class="datetimepicker-block">
      <span class="demonstration">搜索时间</span>
      <el-date-picker
        v-model="value2"
        type="datetimerange"
        :shortcuts="shortcuts"
        range-separator="到"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
    </div>
    <pageTable
      :columns="columns"
      :tableData="tableData"
      :isDetailText="true"
      detailText="任务详情"
      @ciick-detail="ciickDetail"
    ></pageTable>
    <el-drawer v-model="drawer" title="任务详情">
      <el-card class="box-card" v-for="i in 3" :key="i">
        <template #header>
          <div class="card-header">
            <span> <i class="iconfont icon-touxiangguanli"></i> Card name</span>
            <el-button class="button" text>Operation button</el-button>
          </div>
        </template>
        <div v-for="o in 4" :key="o" class="text item">
          {{ 'List item ' + o }}
        </div>
      </el-card>
    </el-drawer>
  </BaseCard>
</template>

<script lang="ts" setup>
import BaseCard from '@/components/baseCard.vue'
import pageTable from '@/components/pageTable.vue'
import oneImg from '@/assets/img/1.png'
import twoImg from '@/assets/img/2.png'
import { ref } from 'vue'
import type { IGetDevice } from '@/type/home'
const value2 = ref('')
const shortcuts = [
  {
    text: '一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    }
  },
  {
    text: '一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    }
  },
  {
    text: '三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    }
  }
]
const columns = ref([
  { label: 'ID', prop: 'tagId', type: 'text', width: '70' },

  { label: '标签名称', prop: 'tagName', type: 'text', minwidth: '100' },
  { label: '名单类型', prop: 'typeText', type: 'text', minwidth: '200' },
  { label: '描述', prop: 'description', type: 'text', minwidth: '200' },
  { label: '头像', prop: 'personImg', type: 'imgPersonId', width: '100' },
  { label: '大图', prop: 'bigImg', type: 'bigImg', width: '150' },
  { label: '在线状态', prop: 'online', type: 'onlineState', width: '100' },
  { label: 'IP', prop: 'ip', type: 'text', minwidth: '150' }
])
const tableData = ref([
  {
    tagId: 1,
    personImg: oneImg,
    bigImg: twoImg,
    tagName: '名称1',
    typeText: '类型1',
    description: '哈哈哈1',
    online: true,
    ip: '192.168.1.1'
  }
])
const drawer = ref(false)
const ciickDetail = (data: IGetDevice) => {
  console.log(data)

  drawer.value = true
}
</script>

<style lang="scss" scoped>
.datetimepicker-block {
  .demonstration {
    margin-right: 10px;
  }
}
.box-card {
  margin-bottom: 10px;
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }
}
</style>
